<template>
	<view class='container'>
	    <view class="bgBook"></view>
		<view class="Button2">
			<text class="button">创建或参与的球局</text>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view class="newsContainer" v-for="item in createGame" key="index">
					<view class="newsLeft">
						<image :src="item.logPath" mode="aspectFill"></image>
					</view>
					<view class="newsRight">
						<view class="text" @click="onGameClick(item)">
							<text font-size=50rpx>{{item.name}}</text>
						</view>
						<view class="time">
							<text class="timesplice">{{item.selectedDate}}</text>
							<view class="state"><text class="state">{{item.state}}
									{{item.personNum}}/{{2*item.competitionSystem}}</text></view>
						</view>
					</view>
				</view>

			</view>
			<view v-if="current === 1">
				<view class="newsContainer" v-for="item in paticipateGame" key="index">
					<view class="newsLeft">
						<image :src="item.logPath" mode="aspectFill"></image>
					</view>
					<view class="newsRight">
						<view class="text" @click="onGameClick(item)">
							<text font-size=50rpx>{{item.name}}</text>
						</view>
						<view class="time">
							<text class="timesplice">{{item.selectedDate}}</text>
							<view class="state"><text class="state">{{item.state}}
									{{item.personNum}}/{{2*item.competitionSystem}}</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>

	<!-- 	<uni-card title="" :isFull="true" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
		<text class="uni-body">这是一个通栏卡片 ，通栏没有外边距，左右会贴合父元素。</text>
	</uni-card> -->
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl
	} from '../../tool/tool';
	const app = getApp();
	const current = ref(0);
	const items = ['我创建的', '我参与的']
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};
	let createGame = ref([])
	let paticipateGame = ref([])


	onShow(() => {
		uni.request({
			url: baseUrl + "/SeriesGame/getJoinGame?account=" + app.globalData.account,
			method: 'GET',
			success(res) {
				paticipateGame.value = res.data;
				console.log(createGame.value)
			}
		});
		uni.request({
			url: baseUrl + "/SeriesGame/getMasterGame?account=" + app.globalData.account,
			method: 'GET',
			success(res) {
				createGame.value = res.data;
				console.log(paticipateGame.value)
			}
		})
	})
</script>

<style lang="scss" scoped>
	.bgBook{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient( #BBE5FD 0%, #D2DAFD 49%, #fff 100%);
		z-index: -1;
	}
	.Button2 {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.uni-common-mt {
		margin-top: 10px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;

		.newsContainer {
			width: 100%;
			height: 250rpx;
			display: flex;
			justify-content: space-between;
			// margin-left: 500rpx;
			margin-top: 20rpx;

			/* 根据需要调整 newsLeft 和 newsRight 之间的间距 */
			.newsLeft {
				margin-top: 15rpx;
				margin-bottom: 15rpx;
				width: 220rpx;
				height: 220rpx;
				// background: #1296db;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.newsRight {
				flex: 1;
				// background: #666;
			}

			.text {
				margin-top: 20rpx;
				height: 150rpx;
			}

			.time {
				font-size: 25rpx;
				color: #666;
				//display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.timesplice {
					width: 70%;
				}
			}
		}

	}
</style>